<template>
  <div class="cart">
    <div class="content">
      <div class="content-left">
        <div class="logo-wrapper" @click="toggleList">
          <div class="logo" :class="{'highlight':totalCount>0}">
            <span class="icon-shopping_cart" :class="{'highlight':totalCount>0}"></span>
          </div>
          <div class="num" v-show="totalCount>0">{{totalCount}}</div>
        </div>
        <div class="price" :class="{'highlight':totalPrice>0}">￥{{totalPrice}}</div>
        <div class="deliveryPrice">另需配送费{{deliveryPrice}}元</div>
      </div>
      <div class="content-right" :class="payClass">
        {{payPrice}}
      </div>
    </div>
    <fade-animation>
      <div class="cart-list" v-show="!fold">
        <div class="list-title border-1px">
          <h1 class="title">购物车</h1>
          <span class="empty" @click="empty">清空</span>
        </div>
        <div class="list-content" ref="listContent">
          <ul>
            <li class="food" v-for="(food,index) of selectFoods" :key="index">
              <span class="name">{{food.name}}</span>
              <div class="price">￥{{food.price * food.count}}</div>
              <div class="cartcontrol-wrapper">
                <cart-control :food="food"></cart-control>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </fade-animation>
    <fade-animation>
      <div class="background-blur" v-show="!fold"></div>
    </fade-animation>
  </div>
</template>
<script>
// import BScroll from 'better-scroll'
import CartControl from 'components/cartcontrol/CartControl'
import FadeAnimation from 'components/animation/FadeAnimation'
export default {
  name: 'GoodsCart',
  data () {
    return {
      fold: true // cart-list状态变量，默认为折叠
    }
  },
  components: {
    CartControl,
    FadeAnimation
  },
  methods: {
    toggleList () {
      if (!this.totalCount) {
        return
      }
      this.fold = !this.fold
      // if (!this.fold) {
      //   this.$nextTick(() => {
      //     if (!this.scroll) {
      //       this.scroll = new BScroll(this.$refs.listContent, {
      //         click: true
      //       })
      //     } else {
      //       this.scroll.refresh()
      //     }
      //   })
      // }
    },
    empty () {
      this.selectFoods.forEach((food) => {
        food.count = 0
      })
    }
  },
  props: {
    minPrice: {
      type: Number,
      default: 0
    },
    deliveryPrice: {
      type: Number,
      default: 0
    },
    selectFoods: {
      type: Array,
      default () {
        return []
      }
    }
  },
  computed: {
    totalPrice () {
      let total = 0
      this.selectFoods.forEach((food) => {
        total += food.price * food.count
      })
      return total
    },
    totalCount () {
      let count = 0
      this.selectFoods.forEach((food) => {
        count += food.count
      })
      return count
    },
    payPrice () {
      if (this.totalPrice === 0) {
        return `￥${this.minPrice}元起送`
      } else if (this.totalPrice < this.minPrice) {
        return `还差￥${this.minPrice - this.totalPrice}元起送`
      } else if (this.totalPrice >= this.minPrice) {
        return '去结算'
      }
    },
    payClass () {
      if (this.totalPrice < this.minPrice) {
        return 'not-enough'
      } else if (this.totalPrice >= this.minPrice) {
        return 'enough'
      }
    }
  },
  watch: {
    selectFoods (newValue, oldValue) {
      if (newValue.length === 0) {
        this.fold = true
      }
    }
  }
}
</script>
<style lang="stylus" scoped>
  @import '~common/styles/mixins.styl'
  @import '~common/styles/varibles.styl'
  .cart
    z-index 50
    position fixed
    left 0
    right 0
    bottom 0
    height 48px
    .content
      display flex
      background-color #141d27
      .content-left
        flex 1
        font-size 0
        .logo-wrapper
          position relative
          display inline-block
          vertical-align top
          top -10px
          margin 0 12px
          padding 6px
          width 56px
          height 56px
          border-radius 50%
          background-color #141d27
          box-sizing border-box
          .logo
            width 44px
            height 44px
            border-radius 50%
            background-color rgb(43,52,61)
            text-align center
            &.highlight
              background-color rgb(0,160,220)
            .icon-shopping_cart
              font-size 24px
              vertical-align top
              line-height 44px
              color rgba(255,255,255,.4)
              &.highlight
                color #fff
          .num
            position absolute
            top 0
            right 0
            width 24px
            height 16px
            line-height 16px
            font-size 9px
            font-weight 700
            border-radius 16px
            color #fff
            text-align center
            background-color rgb(240,20,20)
            box-shadow 0 4px 8px 0 rgba(0,0,0,.4)
        .price
          display inline-block
          padding-right 12px
          margin 12px 0
          line-height 24px
          font-size 16px
          font-weight 700
          color rgba(255,255,255,.4)
          border-right 1px solid rgba(255,255,255,.1)
          &.highlight
            color #fff
        .deliveryPrice
          display inline-block
          line-height 24px
          font-size 16px
          padding 0 12px
          color rgba(255,255,255,.4)
      .content-right
        flex 0 0 105px
        padding 12px 8px
        width 105px
        line-height 24px
        font-size 14px
        font-weight 700
        text-align center
        color rgba(255,255,255,.4)
        box-sizing border-box
        &.not-enough
          background-color rgb(43,52,61)
        &.enough
          color #fff
          background-color #00b43c
    .cart-list
      z-index -1
      position fixed
      left 0
      right 0
      bottom 48px
      .list-title
        padding 0 18px
        height 40px
        line-height 40px
        background-color #f3f5f7
        border-1px(rgba(7,17,27,.1))
        .title
          float left
          font-size 14px
          font-weight 200
          color rgb(7,17,27)
        .empty
          float right
          font-size 12px
          color rgb(0,160,220)
      .list-content
        overflow auto
        // overflow hidden
        padding 0 18px
        max-height 217.5px
        background-color #fff
        &::-webkit-scrollbar // 通过伪类隐藏浏览器的滚动条
          width 0
          height 0
        .food
          position relative
          padding 12px 0
          height 48px
          border-bottom 1px solid rgba(7,17,27,.1)
          box-sizing border-box
          .name
            font-size 14px
            line-height 24px
            color rgb(7,17,27)
          .price
            position absolute
            top 12px
            right 90px
            font-size 14px
            line-height 24px
            font-weight 700
            color rgb(240,20,20)
          .cartcontrol-wrapper
            position absolute
            top 6px
            right 0

    .background-blur
      z-index -10
      position fixed
      top 0
      left 0
      right 0
      bottom 0
      background-color rgba(7,17,27,.6)
      blur 10px
</style>
